<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><spring:message code="title.register"></spring:message></title>

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/bootstrap/bootstrap.css"
	media="screen">

<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/jquery/jquery-1.11.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/bootstrap/bootstrap.js"></script>
	
<script type="text/javascript">

$(document).ready(function(){
$("#username").blur(function(){
	
	var link = "${pageContext.request.contextPath}/checkUsername";
	var username = $("#username").val();
	
	if(username.trim()) {
		$.ajax({
			
			url : link,
			data : { 
				"username" : username
			},
			type : "POST",
			
			success : function(response) {
				alert(response);
				
				if(response === "false") {
					//$("username-div").attr("class", "col-md-4 col-md-offset-4 has-success");
					$("#firstname").val("postoji username");
				} else {
					//$("username-div").attr("class", "col-md-4 col-md-offset-4 has-error");
					$("#firstname").val("ne postoji usrename");
				}
				
				
			},
			
			error : function() {
				alert("ERROR");
			}
			
		})
		
		return false;
	}
	
});
})

</script>

</head>
<body>

	<div class="container">
		<form:form action="register" commandName="registerUserDto"
			method="POST" class="form-horizontal" role="form">
			<fieldset>
				<spring:message code="message.register" var="messageRegister"></spring:message>
				<h2 class="form-signin-heading" align="center">${ messageRegister }</h2>
				<div class="form-group">
					<div class="row">
						<div id="usernamediv" class="col-md-4 col-md-offset-4">
							<spring:message code="label.username" var="username"></spring:message>
							<form:input id="username" path="username" placeholder="${ username }"
								required="true" class="form-control" />
							<form:errors path="username" class="text-danger"></form:errors>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="row">
						<div class="col-md-4 col-md-offset-4">
							<spring:message code="label.password" var="password"></spring:message>
							<form:password placeholder="${ password }" required="true"
								path="password" class="form-control" />
							<form:errors path="password" class="text-danger"></form:errors>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="row">
						<div class="col-md-4 col-md-offset-4">
							<spring:message code="label.passwordRetyped"
								var="passwordRetyped"></spring:message>
							<form:password placeholder="${ passwordRetyped }" required="true"
								path="passwordRetyped" class="form-control" />
							<form:errors path="passwordRetyped" class="text-danger"></form:errors>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="row">
						<div class="col-md-4 col-md-offset-4">
							<spring:message code="label.firstname" var="firstname"></spring:message>
							<form:input id="firstname" placeholder="${ firstname }" path="firstname"
								class="form-control" />
							<form:errors path="firstname" class="text-danger"></form:errors>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="row">
						<div class="col-md-4 col-md-offset-4">
							<spring:message code="label.lastname" var="lastname"></spring:message>
							<form:input placeholder="${ lastname }" path="lastname"
								class="form-control" />
							<form:errors path="lastname" class="text-danger"></form:errors>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="row">
						<div class="col-md-4 col-md-offset-4">
							<spring:message code="label.dateOfBirth" var="dateOfBirth"></spring:message>
							<form:input placeholder="${ dateOfBirth }" path="dateOfBirth" 
								type="date" class="form-control" />
							<form:errors path="dateOfBirth" class="text-danger"></form:errors>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="row">
						<div class="col-md-4 col-md-offset-4">
							<spring:message code="label.email" var="email"></spring:message>
							<form:input placeholder="${ email }" path="email" 
								type="email" required="true" class="form-control" />
							<form:errors path="email" class="text-danger" cssClass="red"></form:errors>
						</div>
					</div>
				</div>
				<div class="form-group" align="center">
					<div class="row">
						<spring:message code="btn.reset" var="btnReset"></spring:message>
						<input class="btn btn-default btn-lg" type="reset"
							value="${ btnReset }">
						<spring:message code="btn.register" var="btnRegister"></spring:message>
						<input class="btn btn-primary btn-lg" type="submit"
							value="${ btnRegister }">
					</div>
				</div>
			</fieldset>
		</form:form>
	</div>

</body>
</html>